<div class="row mb-3">
  <div class="col-6">
    <h3 class="primary-text m-0">{{ 'menu.settings.title' | translate }}</h3>
  </div>
  <div class="col-6 text-end">
    <button
      type="button"
      class="btn btn-elegant my-0 me-0"
      (click)="toggleSearch()"
      [attr.aria-label]="'form.search' | translate"
    >
      <i class="fas{{ showSearchBar ? ' primary-text' : '' }} fa-search"></i>
    </button>
  </div>
</div>

@if (showSearchBar) {
<div class="row">
  <div class="col-md-12">
    <form novalidate>
      <input
        type="text"
        class="search-bar"
        #searchInput
        [placeholder]="'form.search' | translate"
        [(ngModel)]="searchQuery"
        (ngModelChange)="filterSettings()"
        [ngModelOptions]="{standalone: true}"
      />
      @if (searchQuery) {
      <a class="search-bar-clear" href="javascript:void(0)" (click)="clearSearch()">
        <i class="fas fa-square-xmark"></i>
      </a>
      }
    </form>
  </div>
</div>
} @if (loading) {
<app-spinner />
} @else {
<!-- GENERAL SETTINGS -->
@if (isSectionVisible('general')) {
<div class="my-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.general ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsGeneral'"
    (click)="toggleSection('general')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i class="fa" [ngClass]="{ 'fa-chevron-down': showFields.general, 'fa-chevron-right': !showFields.general }"></i>
      {{ 'settings.general.title_general' | translate }}
    </h5>
  </div>
  @if (showFields.general) {
  <ul class="list-group list-group-box mt-2 mx-0" id="fieldsGeneral">
    @if (!isItemHidden('setting-name')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>{{ 'settings.name' | translate }}</span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2"
          type="text"
          [formControl]="hbNameFormControl"
          [attr.aria-label]="'settings.name' | translate"
          [ngClass]="{ 'is-invalid': hbNameIsInvalid }"
        />
        @if (hbNameIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-backup')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">{{ 'backup.title_backup' | translate }}</span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="openBackupModal()"
        [attr.aria-label]="'backup.title_backup' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    } @if (!isItemHidden('setting-restore')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">{{ 'config.restore.title' | translate }}</span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="openConfigBackup()"
        [attr.aria-label]="'config.restore.title' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    } @if (!isItemHidden('setting-users')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">{{ 'menu.tooltip_user_accounts' | translate }}</span>
      <a
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        routerLink="/users"
        [attr.aria-label]="'menu.tooltip_user_accounts' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </a>
    </li>
    }
  </ul>
  }
</div>
}

<!-- DISPLAY SETTINGS -->
@if (isSectionVisible('display')) {
<div class="my-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.display ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsDisplay'"
    (click)="toggleSection('display')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i class="fa" [ngClass]="{ 'fa-chevron-down': showFields.display, 'fa-chevron-right': !showFields.display }"></i>
      {{ 'settings.general.title_display' | translate }}
    </h5>
  </div>
  @if (showFields.display) {
  <ul class="list-group list-group-box mt-2 mx-0" id="fieldsDisplay">
    @if (!isItemHidden('setting-lang')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      {{ 'settings.display.lang' | translate }}
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <select class="custom-select resp-select order-1 order-md-2" [formControl]="uiLangFormControl">
          <option value="auto">{{ 'form.select.auto' | translate }}</option>
          <option value="bg">Bulgarian (bg)</option>
          <option value="ca">Catalan (ca)</option>
          <option value="zh-CN">Chinese - Simplified (zh-CN)</option>
          <option value="zh-TW">Chinese - Traditional (zh-TW)</option>
          <option value="cs">Czech (cs)</option>
          <option value="nl">Dutch (nl)</option>
          <option value="en">English (en)</option>
          <option value="fi">Finnish (fi)</option>
          <option value="fr">French (fr)</option>
          <option value="de">German (de)</option>
          <option value="he">Hebrew (he)</option>
          <option value="hu">Hungarian (hu)</option>
          <option value="id">Indonesian (id)</option>
          <option value="it">Italian (it)</option>
          <option value="ja">Japanese (ja)</option>
          <option value="ko">Korean (ko)</option>
          <option value="mk">Macedonian (mk)</option>
          <option value="no">Norwegian (no)</option>
          <option value="pl">Polish (pl)</option>
          <option value="pt-BR">Portuguese (Brazil)</option>
          <option value="pt">Portuguese (Portugal)</option>
          <option value="ru">Russian (ru)</option>
          <option value="sl">Slovenian (sl)</option>
          <option value="es">Spanish (es)</option>
          <option value="sv">Swedish (sv)</option>
          <option value="th">Thai (th)</option>
          <option value="tr">Turkish (tr)</option>
          <option value="uk">Ukrainian (uk)</option>
        </select>
        @if (uiLangIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-theme')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      {{ 'settings.display.theme' | translate }}
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <select class="custom-select resp-select order-1 order-md-2" [formControl]="uiThemeFormControl">
          <option value="orange">{{ 'settings.display.orange' | translate }}</option>
          <option value="red">{{ 'settings.display.red' | translate }}</option>
          <option value="pink">{{ 'settings.display.pink' | translate }}</option>
          <option value="purple">{{ 'settings.display.purple' | translate }}</option>
          <option value="deep-purple">{{ 'settings.display.deep_purple' | translate }}</option>
          <option value="indigo">{{ 'settings.display.indigo' | translate }}</option>
          <option value="blue">{{ 'settings.display.blue' | translate }}</option>
          <option value="blue-grey">{{ 'settings.display.bluegrey' | translate }}</option>
          <option value="cyan">{{ 'settings.display.cyan' | translate }}</option>
          <option value="green">{{ 'settings.display.green' | translate }}</option>
          <option value="teal">{{ 'settings.display.teal' | translate }}</option>
          <option value="grey">{{ 'settings.display.grey' | translate }}</option>
          <option value="brown">{{ 'settings.display.brown' | translate }}</option>
        </select>
        @if (uiThemeIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-lighting')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      {{ 'settings.display.lighting_mode' | translate }}
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <select class="custom-select resp-select order-1 order-md-2" [formControl]="uiLightFormControl">
          <option value="auto">{{ 'form.select.auto' | translate }}</option>
          <option value="light">{{ 'settings.display.light' | translate }}</option>
          <option value="dark">{{ 'settings.display.dark' | translate }}</option>
        </select>
        @if (uiLightIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-menu')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      {{ 'settings.display.menu_mode' | translate }}
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <select class="custom-select resp-select order-1 order-md-2" [formControl]="uiMenuFormControl">
          <option value="default">{{ 'settings.display.menu_default' | translate }}</option>
          <option value="freeze">{{ 'settings.display.menu_freeze' | translate }}</option>
        </select>
        @if (uiMenuIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-temp')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      {{ 'settings.display.temp_units' | translate }}
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <select class="custom-select resp-select order-1 order-md-2" [formControl]="uiTempFormControl">
          <option value="c">{{ 'settings.display.temp_units.c' | translate }}</option>
          <option value="f">{{ 'settings.display.temp_units.f' | translate }}</option>
        </select>
        @if (uiTempIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-betas')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      {{ 'settings.display.show_betas' | translate }}
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="uiAlwaysShowBetas"
            [formControl]="uiAlwaysShowBetasFormControl"
            [attr.aria-label]="'settings.display.show_betas' | translate"
          />
          <label for="uiAlwaysShowBetas" class="rendux-label ms-3" style="min-width: 50px"></label>
        </div>
        @if (uiAlwaysShowBetasIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-wallpaper')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">{{ 'settings.display.wallpaper' | translate }}</span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="openWallpaperModal()"
        [attr.aria-label]="'settings.display.wallpaper' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    }
  </ul>
  }
</div>
}

<!-- STARTUP/ENV OPTIONS -->
@if (isSectionVisible('startup')) {
<div class="my-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.startup ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsStartup'"
    (click)="toggleSection('startup')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i class="fa" [ngClass]="{ 'fa-chevron-down': showFields.startup, 'fa-chevron-right': !showFields.startup }"></i>
      {{ 'settings.title_startup_options' | translate }}
    </h5>
  </div>
  @if (showFields.startup) {
  <ul class="list-group list-group-box mb-4 mx-0" id="fieldsStartup">
    @if (!isItemHidden('setting-debug')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.startup.debug' | translate }} <code>-D</code><br />
        <small class="grey-text pe-2">{{ debugFieldDesc | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="homebridgeDebugMode"
            [formControl]="hbDebugFormControl"
            [attr.aria-label]="'settings.startup.debug' | translate"
          />
          <label for="homebridgeDebugMode" class="rendux-label ms-3" style="min-width: 50px"></label>
        </div>
        @if (hbDebugIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-insecure')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.startup.insecure' | translate }} <code>-I</code><br />
        <small class="grey-text pe-2">{{ 'settings.startup.insecure_desc' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="homebridgeInsecureMode"
            [formControl]="hbInsecureFormControl"
            [attr.aria-label]="'settings.startup.insecure' | translate"
          />
          <label for="homebridgeInsecureMode" class="rendux-label ms-3" style="min-width: 50px"></label>
        </div>
        @if (hbInsecureIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-keep')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.startup.keep_accessories' | translate }} <code>-K</code><br />
        <small class="grey-text pe-2">{{ 'settings.startup.keep_accessories_desc' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="homebridgeKeepOrphans"
            [formControl]="hbKeepFormControl"
            [attr.aria-label]="'settings.startup.keep_accessories' | translate"
          />
          <label for="homebridgeKeepOrphans" class="rendux-label ms-3" style="min-width: 50px"></label>
        </div>
        @if (hbKeepIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-scheduled-restart')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.startup.scheduled_restart' | translate }}
        <span class="badge badge-primary ms-1">{{ 'common.labels.beta' | translate }}</span><br />
        <small class="grey-text pe-2">
          <span [innerHtml]="'settings.startup.scheduled_restart_desc' | translate: { link: linkCron }"></span>
          {{'settings.startup.scheduled_restart_desc_2' | translate }}
        </small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex flex-column align-items-end">
        <div class="d-flex align-items-center w-100">
          <input
            class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
            type="text"
            placeholder="mm hh dd MM ww"
            [formControl]="scheduledRestartCronFormControl"
            [attr.aria-label]="'settings.startup.scheduled_restart' | translate"
            [style.letter-spacing]="'0.15em'"
            [style.text-align]="'center'"
            maxlength="30"
          />
          @if (scheduledRestartCronIsSaving) {
          <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
          }
        </div>
      </div>
    </li>
    } @if (!isItemHidden('setting-metrics-startup')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.startup.metrics' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.startup.metrics_desc' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="homebridgeMetrics"
            [formControl]="uiMetricsFormControl"
            [attr.aria-label]="'settings.startup.metrics' | translate"
          />
          <label for="homebridgeMetrics" class="rendux-label ms-3" style="min-width: 50px"></label>
        </div>
        @if (uiMetricsIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-package-path')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.network.hb_package' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.network.hb_package_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="text"
          placeholder="/usr/local/lib/node_modules/homebridge"
          [formControl]="hbPackageFormControl"
          [attr.aria-label]="'settings.network.hb_package' | translate"
        />
        @if (hbPackageIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (platform === 'linux') {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.linux.shutdown' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.linux.shutdown_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="text"
          placeholder="shutdown"
          [formControl]="hbLinuxShutdownFormControl"
          [attr.aria-label]="'settings.linux.shutdown' | translate"
        />
        @if (hbLinuxShutdownIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    @if (!isItemHidden('setting-linux-restart')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.linux.restart' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.linux.restart_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center font-monospace">
        <input
          class="form-control custom-input resp-input order-1 order-md-2"
          type="text"
          placeholder="reboot"
          [formControl]="hbLinuxRestartFormControl"
          [attr.aria-label]="'settings.linux.restart' | translate"
        />
        @if (hbLinuxRestartIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (runningOnRaspberryPi) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.linux.temp' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.linux.temp_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="text"
          placeholder="/sys/class/thermal/thermal_zone0/temp"
          [formControl]="uiTempFileFormControl"
          [attr.aria-label]="'settings.linux.temp' | translate"
        />
        @if (uiTempFileIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } } @if (!isItemHidden('setting-env-debug-manual')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        <span class="font-monospace">DEBUG</span><br />
        <small
          class="grey-text pe-2"
          [innerHTML]="'settings.service.debug_tooltip' | translate: { link: linkDebug }"
        ></small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          [formControl]="hbEnvDebugFormControl"
          type="text"
          placeholder="HAP-NodeJS:Advertiser,HAP-NodeJS:Service"
        />
        @if (hbEnvDebugIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-env-node')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        <span class="font-monospace">NODE_OPTIONS</span><br />
        <small class="grey-text pe-2">{{ 'settings.service.node_tooltip' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          [formControl]="hbEnvNodeFormControl"
          type="text"
          placeholder="--max-old-space-size=512 --max-http-header-size=8192"
        />
        @if (hbEnvNodeIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (runningInDocker) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'menu.docker.startup_script' | translate }}<br />
        <small class="grey-text pe-2">{{ 'platform.docker.script_help' | translate }}</small>
      </span>
      <a
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        routerLink="/platform-tools/docker/startup-script"
        [attr.aria-label]="'menu.docker.startup_script' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </a>
    </li>
    }
  </ul>
  }
</div>
}

<!-- NETWORK SETTINGS -->
@if (isSectionVisible('network')) {
<div class="my-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.network ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsNetwork'"
    (click)="toggleSection('network')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i class="fa" [ngClass]="{ 'fa-chevron-down': showFields.network, 'fa-chevron-right': !showFields.network }"></i>
      {{ 'settings.network.title_network' | translate }}
    </h5>
  </div>
  @if (showFields.network) {
  <ul class="list-group list-group-box mt-2 mx-0" id="fieldsNetwork">
    @if (!isItemHidden('setting-interfaces')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'settings.network.title_network_interfaces' | translate }}<br />
        <div class="small grey-text pe-2">{{ 'settings.network.message_network_interface' | translate }}</div>
        @for (adapter of adaptersSelected; track adapter) {
        <span
          class="badge badge-primary me-1"
          [ngClass]="{ 'badge-danger': adapter.missing, 'badge-info': !adapter.missing }"
        >
          @if (adapter.missing) {
          <i class="fas fa-exclamation-triangle"></i>
          } {{ adapter.iface }}:
          <span class="fw-normal"
            >{{ adapter.missing ? ('settings.mdns_advertiser_not_connected' | translate) : adapter.ip4 || adapter.ip6
            }}</span
          >
        </span>
        }
      </span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="selectNetworkInterfaces()"
        [disabled]="!adaptersAvailable.length"
        [attr.aria-label]="'settings.network.title_network_interfaces' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    } @if (!isItemHidden('setting-mdns')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.mdns_advertiser' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.mdns_advertiser_help' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <select
          class="custom-select resp-select order-1 order-md-2"
          [formControl]="hbMDnsFormControl"
          [attr.aria-label]="'settings.mdns_advertiser' | translate"
        >
          @if (showAvahiMdnsOption) {
          <option value="avahi">Avahi ({{ 'settings.mdns_advertiser_rec' | translate }})</option>
          }
          <!-- ciao is recommended if avahi is not available -->
          <option value="ciao">
            Ciao {{ showAvahiMdnsOption ? '' : '(' + ('settings.mdns_advertiser_rec' | translate) + ')' }}
          </option>
          <option value="bonjour-hap">Bonjour HAP</option>
          @if (showResolvedMdnsOption) {
          <option value="resolved">systemd-resolved ({{ 'settings.mdns_advertiser_exp' | translate }})</option>
          }
        </select>
        @if (hbMDnsIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-port-hb')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.network.port_hb' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.network.port_hb_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="number"
          min="1025"
          max="65533"
          [formControl]="hbPortFormControl"
          [attr.aria-label]="'settings.network.port_hb' | translate"
          [ngClass]="{ 'is-invalid': hbPortIsInvalid }"
        />
        @if (hbPortIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-port-range')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.network.port_start' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.network.port_start_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="number"
          min="1025"
          max="65533"
          [formControl]="hbStartPortFormControl"
          [attr.aria-label]="'settings.network.port_start' | translate"
          [ngClass]="{ 'is-invalid': hbStartPortIsInvalid }"
        />
        @if (hbStartPortIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-port-end')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.network.port_end' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.network.port_end_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="number"
          min="1025"
          max="65533"
          [formControl]="hbEndPortFormControl"
          [attr.aria-label]="'settings.network.port_end' | translate"
          [ngClass]="{ 'is-invalid': hbEndPortIsInvalid }"
        />
        @if (hbEndPortIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-network-host')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.network.host' | translate }}<br />
        <small class="grey-text pe-2" [innerHtml]="'settings.network.host_desc' | translate"></small>
        @if (isPwa) {
        <br /><small class="grey-text pe-2">
          <i class="fas fa-exclamation-triangle red-text"></i>
          {{ 'settings.warning_pwa' | translate }}
        </small>
        }
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="text"
          pattern="^[^{}/:\\s]+(?::\d+)?$"
          [formControl]="uiHostFormControl"
          placeholder="0.0.0.0"
          [attr.aria-label]="'settings.network.host' | translate"
        />
        @if (uiHostIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-network-proxy')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.network.proxy' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.network.proxy_desc' | translate }}</small>
        @if (isPwa) {
        <br /><small class="grey-text pe-2">
          <i class="fas fa-exclamation-triangle red-text"></i>
          {{ 'settings.warning_pwa' | translate }}
        </small>
        }
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="text"
          pattern="^[^{}/:\\s]+(?::\d+)?$"
          placeholder="example.com:8443"
          [formControl]="uiProxyHostFormControl"
          [attr.aria-label]="'settings.network.proxy' | translate"
        />
        @if (uiProxyHostIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-ui-port-network')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.network.port_ui' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.network.port_ui_desc' | translate }}</small>
        @if (isPwa) {
        <br /><small class="grey-text pe-2">
          <i class="fas fa-exclamation-triangle red-text"></i>
          {{ 'settings.warning_pwa' | translate }}
        </small>
        }
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="number"
          min="1025"
          max="65533"
          placeholder="8581"
          [formControl]="uiPortFormControl"
          [attr.aria-label]="'settings.network.port_ui' | translate"
          [ngClass]="{ 'is-invalid': uiPortIsInvalid }"
        />
        @if (uiPortIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-mdns-advertise')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.network.mdns_advertise' | translate }}
        <span class="badge badge-primary ms-1">{{ 'common.labels.beta' | translate }}</span><br />
        <small class="grey-text pe-2">{{ 'settings.network.mdns_advertise_help' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="enableMdnsAdvertise"
            [formControl]="enableMdnsAdvertiseFormControl"
            [attr.aria-label]="'settings.network.mdns_advertise' | translate"
          />
          <label class="rendux-label ms-3" for="enableMdnsAdvertise" style="min-width: 50px"></label>
        </div>
        @if (enableMdnsAdvertiseIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    }
  </ul>
  }
</div>
}

<!-- LOGGING & TERMINAL SETTINGS -->
@if (isSectionVisible('terminal')) {
<div class="my-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.terminal ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsTerminal'"
    (click)="toggleSection('terminal')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i
        class="fa"
        [ngClass]="{ 'fa-chevron-down': showFields.terminal, 'fa-chevron-right': !showFields.terminal }"
      ></i>
      {{ 'settings.network.title_terminal' | translate }}
    </h5>
  </div>
  @if (showFields.terminal) {
  <ul class="list-group list-group-box mt-2 mx-0" id="fieldsTerminal">
    @if (!isItemHidden('setting-terminal-log-max')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.terminal.log_max' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.terminal.log_max_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="number"
          min="-1"
          placeholder="1000000"
          [formControl]="hbLogSizeFormControl"
          [attr.aria-label]="'settings.terminal.log_max' | translate"
          [ngClass]="{ 'is-invalid': hbLogSizeIsInvalid }"
        />
        @if (hbLogSizeIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (hbLogSizeFormControl.value > 0) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.terminal.log_truncate' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.terminal.log_truncate_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="number"
          min="0"
          placeholder="200000"
          [formControl]="hbLogTruncateFormControl"
          [attr.aria-label]="'settings.terminal.log_truncate' | translate"
          [ngClass]="{ 'is-invalid': hbLogTruncateIsInvalid }"
        />
        @if (hbLogTruncateIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (enableTerminalAccess) { @if (!isItemHidden('setting-terminal-persistence')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.terminal.persistence' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.terminal.persistence_help' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="terminalPersistence"
            [formControl]="uiTerminalPersistenceFormControl"
            [attr.aria-label]="'settings.terminal.persistence' | translate"
          />
          <label class="rendux-label ms-3" for="terminalPersistence" style="min-width: 50px"></label>
        </div>
        @if (uiTerminalPersistenceIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!uiTerminalPersistenceFormControl.value) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.terminal.warning' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.terminal.warning_help' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="terminalHideWarning"
            [formControl]="uiTerminalHideWarningFormControl"
            [attr.aria-label]="'settings.terminal.warning' | translate"
          />
          <label class="rendux-label ms-3" for="terminalHideWarning" style="min-width: 50px"></label>
        </div>
        @if (uiTerminalHideWarningIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (uiTerminalPersistenceFormControl.value) { @if (!isItemHidden('setting-terminal-buffer')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <div class="d-flex flex-column">
        <span>{{ 'settings.terminal.buffer_size' | translate }}</span>
        <div class="small grey-text">{{ 'settings.terminal.buffer_size_help' | translate }}</div>
      </div>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2 font-monospace"
          type="number"
          min="10000"
          max="100000"
          step="10000"
          [formControl]="uiTerminalBufferSizeFormControl"
          [attr.aria-label]="'settings.terminal.buffer_size' | translate"
          [ngClass]="{ 'is-invalid': uiTerminalBufferSizeIsInvalid }"
        />
        @if (uiTerminalBufferSizeIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } } }
  </ul>
  }
</div>
}

<!-- SECURITY SETTINGS -->
@if (isSectionVisible('security')) {
<div class="my-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.security ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsSecurity'"
    (click)="toggleSection('security')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i
        class="fa"
        [ngClass]="{ 'fa-chevron-down': showFields.security, 'fa-chevron-right': !showFields.security }"
      ></i>
      {{ 'settings.network.title_security' | translate }}
    </h5>
  </div>
  @if (showFields.security) {
  <ul class="list-group list-group-box mt-2 mx-0" id="fieldsSecurity">
    @if (!isItemHidden('setting-security-auth')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.security.auth' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.security.auth_desc' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="uiAuthForm"
            [formControl]="uiAuthFormControl"
            [attr.aria-label]="'settings.security.auth' | translate"
          />
          <label for="uiAuthForm" class="rendux-label ms-3" style="min-width: 50px"></label>
        </div>
        @if (uiAuthIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (uiAuthFormControl.value) { @if (!isItemHidden('setting-session-inactivity')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.startup.session_inactivity_based' | translate }}
        <span class="badge badge-primary ms-1">{{ 'common.labels.beta' | translate }}</span><br />
        <small class="grey-text pe-2">{{ 'settings.startup.session_inactivity_based_desc' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="session-inactivity-based"
            [formControl]="uiSessionTimeoutInactivityBasedFormControl"
            [attr.aria-label]="'settings.startup.session_inactivity_based' | translate"
          />
          <label class="rendux-label ms-3" for="session-inactivity-based" style="min-width: 50px"></label>
        </div>
        @if (uiSessionTimeoutInactivityBasedIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-security-session')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.startup.session' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.startup.session_desc' | translate }}</small>
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <div class="d-flex align-items-center gap-2">
          <div class="d-flex align-items-center">
            <input
              class="form-control custom-input font-monospace"
              type="number"
              min="0"
              max="365"
              placeholder="0"
              style="width: 44px; text-align: right"
              [formControl]="uiSessionTimeoutDaysFormControl"
              [attr.aria-label]="'settings.startup.session_days' | translate"
              [ngClass]="{ 'is-invalid': uiSessionTimeoutIsInvalid }"
            />
            <label class="ms-1 me-2 mb-0 text-nowrap grey-text small"
              >{{ 'settings.startup.session_days' | translate }}</label
            >
          </div>
          <div class="d-flex align-items-center">
            <input
              class="form-control custom-input font-monospace"
              type="number"
              min="0"
              max="23"
              placeholder="8"
              style="width: 44px; text-align: right"
              [formControl]="uiSessionTimeoutHoursFormControl"
              [attr.aria-label]="'settings.startup.session_hours' | translate"
              [ngClass]="{ 'is-invalid': uiSessionTimeoutIsInvalid }"
            />
            <label class="ms-1 me-2 mb-0 text-nowrap grey-text small"
              >{{ 'settings.startup.session_hours' | translate }}</label
            >
          </div>
          <div class="d-flex align-items-center">
            <input
              class="form-control custom-input font-monospace"
              type="number"
              min="0"
              max="59"
              placeholder="0"
              style="width: 44px; text-align: right"
              [formControl]="uiSessionTimeoutMinutesFormControl"
              [attr.aria-label]="'settings.startup.session_minutes' | translate"
              [ngClass]="{ 'is-invalid': uiSessionTimeoutIsInvalid }"
            />
            <label class="ms-1 me-2 mb-0 text-nowrap grey-text small"
              >{{ 'settings.startup.session_minutes' | translate }}</label
            >
          </div>
        </div>
        @if (uiSessionTimeoutIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } } @if (!isItemHidden('setting-security-https')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.security.https' | translate }}<br />
        @if (runningOnRaspbianImage) {
        <small class="grey-text pe-2">
          <span [innerHtml]="'settings.security.https_raspbian' | translate: { link: linkRaspbianSsl }"></span>
        </small>
        } @else {
        <small class="grey-text pe-2">{{ 'settings.security.https_desc' | translate }}</small>
        @if (isPwa) {
        <br /><small class="grey-text pe-2">
          <i class="fas fa-exclamation-triangle red-text"></i>
          {{ 'settings.warning_pwa' | translate }}
        </small>
        } }
      </span>
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <select
          class="custom-select resp-select order-1 order-md-2"
          [formControl]="uiSslTypeFormControl"
          [attr.aria-label]="'settings.security.https' | translate"
          [hidden]="runningOnRaspbianImage"
        >
          <option value="off">{{ 'accessories.control.off' | translate }}</option>
          <option value="keycert">{{ 'settings.security.https_keycert' | translate }}</option>
          <option value="pfx">{{ 'settings.security.https_pfx' | translate }}</option>
        </select>
      </div>
    </li>
    }
    <!-- the following options should be hidden for raspbian -->
    @if (!runningOnRaspbianImage) { @if (this.uiSslTypeFormControl.value === 'keycert') {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>{{ 'settings.security.key' | translate }}</span>
      @if (isPwa) {
      <br /><small class="grey-text pe-2">
        <i class="fas fa-exclamation-triangle red-text"></i>
        {{ 'settings.warning_pwa' | translate }}
      </small>
      }
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2"
          type="text"
          placeholder="/Users/.../certs/server.key"
          [formControl]="uiSslKeyFormControl"
          [attr.aria-label]="'settings.security.key' | translate"
        />
        @if (uiSslKeyIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    @if (!isItemHidden('setting-security-cert')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>{{ 'settings.security.cert' | translate }}</span>
      @if (isPwa) {
      <br /><small class="grey-text pe-2">
        <i class="fas fa-exclamation-triangle red-text"></i>
        {{ 'settings.warning_pwa' | translate }}
      </small>
      }
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2"
          type="text"
          placeholder="/Users/.../certs/server.crt"
          [formControl]="uiSslCertFormControl"
          [attr.aria-label]="'settings.security.cert' | translate"
        />
        @if (uiSslCertIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } } @if (this.uiSslTypeFormControl.value === 'pfx') {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>{{ 'settings.security.pfx' | translate }}</span>
      @if (isPwa) {
      <br /><small class="grey-text pe-2">
        <i class="fas fa-exclamation-triangle red-text"></i>
        {{ 'settings.warning_pwa' | translate }}
      </small>
      }
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2"
          type="text"
          placeholder="/Users/.../certs/server.pfx"
          [formControl]="uiSslPfxFormControl"
          [attr.aria-label]="'settings.security.pfx' | translate"
        />
        @if (uiSslPfxIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    @if (!isItemHidden('setting-security-pass')) {
    <li @smoothHide class="list-group-item d-block d-md-flex justify-content-between align-items-center">
      <span>{{ 'settings.security.pass' | translate }}</span>
      @if (isPwa) {
      <br /><small class="grey-text pe-2">
        <i class="fas fa-exclamation-triangle red-text"></i>
        {{ 'settings.warning_pwa' | translate }}
      </small>
      }
      <div class="my-3 my-md-0 ps-0 ps-md-5 w-auto d-flex align-items-center">
        <input
          class="form-control custom-input resp-input order-1 order-md-2"
          [type]="showPfxPassphrase ? 'text' : 'password'"
          placeholder="mypassphrase"
          [formControl]="uiSslPassphraseFormControl"
          [attr.aria-label]="'settings.security.pass' | translate"
          (focus)="showPfxPassphrase = true"
          (blur)="showPfxPassphrase = false"
        />
        @if (uiSslPassphraseIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } } }
    <!-- end of raspbian hidden options -->
    @if (!isItemHidden('setting-security-control')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'settings.security.ui_control' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.security.ui_control_desc' | translate }}</small>
      </span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="accessoryUiControl()"
        [attr.aria-label]="'settings.security.ui_control' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    }
  </ul>
  }
</div>
}

<!-- CACHE SETTINGS -->
@if (isSectionVisible('cache')) {
<div class="my-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.cache ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsCache'"
    (click)="toggleSection('cache')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i class="fa" [ngClass]="{ 'fa-chevron-down': showFields.cache, 'fa-chevron-right': !showFields.cache }"></i>
      {{ 'menu.label_accessories' | translate }}
    </h5>
  </div>
  @if (showFields.cache) {
  <p class="small grey-text mb-2 mx-0">{{ 'settings.cache.desc' | translate }}</p>
  <ul class="list-group list-group-box mb-4 mx-0" id="fieldsCache">
    @if (!isItemHidden('setting-accessory-debug')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span>
        {{ 'settings.accessory.debug' | translate }}<br />
        <small class="grey-text pe-2">{{ 'settings.accessory.debug_desc' | translate }}</small>
      </span>
      <div class="d-flex align-items-center">
        <div class="order-1 order-md-2">
          <input
            type="checkbox"
            class="rendux-input"
            id="accessoryDebug"
            [formControl]="uiAccDebugFormControl"
            [attr.aria-label]="'settings.accessory.debug' | translate"
          />
          <label for="accessoryDebug" class="rendux-label ms-3" style="min-width: 50px"></label>
        </div>
        @if (uiAccDebugIsSaving) {
        <i @fadeInOut class="fas fa-floppy-disk primary-text fa-xl me-0 me-md-2 ms-2 ms-md-0 order-2 order-md-1"></i>
        }
      </div>
    </li>
    } @if (!isItemHidden('setting-reset-accessory-ind')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'reset.accessory_ind.title' | translate }}<br />
        <small class="grey-text pe-2">{{ 'reset.accessory_ind.desc' | translate }}</small>
      </span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="removeSingleCachedAccessories()"
        [attr.aria-label]="'reset.accessory_ind.title' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    } @if (!isItemHidden('setting-reset-bridge-accessories')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'reset.bridge_accessories.title' | translate }}<br />
        <small class="grey-text pe-2">{{ 'reset.bridge_accessories.desc' | translate }}</small>
      </span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="removeBridgeAccessories()"
        [attr.aria-label]="'reset.accessory_all.title' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    } @if (!isItemHidden('setting-reset-accessory-all')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'reset.accessory_all.title' | translate }}<br />
        <small class="grey-text pe-2">{{ 'reset.accessory_all.desc' | translate }}</small>
      </span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="removeAllCachedAccessories()"
        [attr.aria-label]="'reset.accessory_all.title' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    }
  </ul>
  }
</div>
}

<!-- RESET SETTINGS -->
@if (isSectionVisible('reset')) {
<div class="my-4">
  <div
    role="button"
    tabindex="0"
    [attr.aria-expanded]="showFields.reset ? 'true' : 'false'"
    [attr.aria-controls]="'fieldsReset'"
    (click)="toggleSection('reset')"
    class="mt-3 hover-pointer"
  >
    <h5 class="primary-text">
      <i class="fa" [ngClass]="{ 'fa-chevron-down': showFields.reset, 'fa-chevron-right': !showFields.reset }"></i>
      {{ 'reset.bridges.title' | translate }}
    </h5>
  </div>
  @if (showFields.reset) {
  <p class="small grey-text mb-2 mx-0">{{ 'reset.bridges.desc' | translate }}</p>
  <ul class="list-group list-group-box mt-2 mx-0" id="fieldsReset">
    @if (!isItemHidden('setting-reset-bridge-ind')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'reset.bridge_ind.title' | translate }}<br />
        <small class="grey-text pe-2">{{ 'reset.bridge_ind.desc' | translate }}</small>
      </span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="unpairAccessory()"
        [attr.aria-label]="'reset.bridge_ind.title' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    } @if (!isItemHidden('setting-reset-bridge-all')) {
    <li @smoothHide class="list-group-item d-flex justify-content-between align-items-center">
      <span class="pe-2">
        {{ 'reset.bridge_all.title' | translate | titlecase }}<br />
        <small class="grey-text pe-2">{{ 'reset.bridge_all.desc' | translate }}</small>
      </span>
      <button
        class="btn btn-primary waves-effect m-0 ms-3 py-1"
        style="min-width: 50px"
        (click)="resetHomebridgeState()"
        [attr.aria-label]="'reset.bridge_all.title' | translate"
      >
        <i class="fas fa-arrow-right"></i>
      </button>
    </li>
    }
  </ul>
  }
</div>
}
<div class="pb-3"></div>
}
